<template>
  <div class="menu-tree" v-if="treeview.kind == 'manage'">
    <template v-if="treeview.checkbox">
      <el-tree
        ref="tree"
        :data="treeview.data"
        :props="treeview.props"
        node-key="menuId"
        :default-checked-keys="treeview.choose"
        show-checkbox
        :default-expanded-keys = "treeview.expanded"
        highlight-current
        @check-change = "nodechange" 
        icon-class="el-icon-circle-plus-outline"
        :render-content="renderContent"
        :filter-node-method="filterNode"
        >
      </el-tree>
    </template>
    <template v-else>
      <el-tree
        ref="tree"      
        :data="treeview.data"
        :props="treeview.props"
        :default-expanded-keys = "treeview.expanded"
        node-key="menuId"
        highlight-current
        @current-change = "nodechange" 
        icon-class="el-icon-circle-plus-outline"
        :render-content="renderContent"
        :filter-node-method="filterNode"
        >
      </el-tree>
    </template>
  </div> 
  <div class="menu-tree" v-else-if="treeview.kind == 'user'">
    <template v-if="treeview.checkbox">
      <el-tree
        ref="tree"
        :data="treeview.data"
        :props="treeview.props"
        :defaultExpandAll="treeview.defaultExpandAll"
        node-key="menuId"
        :default-checked-keys="treeview.choose"
        show-checkbox
        :default-expanded-keys = "treeview.expanded"
        highlight-current
        @check-change = "nodechange" 
        icon-class="el-icon-circle-plus-outline"
        :render-content="renderUser"
        :filter-node-method="filterNode"
        >
      </el-tree>
    </template>
    <template v-else>
      <el-tree
        ref="tree"      
        :data="treeview.data"
        :props="treeview.props"
        :default-expanded-keys = "treeview.expanded"
        node-key="menuId"
        highlight-current
        @current-change = "nodechange" 
        icon-class="el-icon-circle-plus-outline"
        :render-content="renderUser"
        :filter-node-method="filterNode"
        >
      </el-tree>
    </template>
  </div>  
  <div class="menu-tree"  v-else >
    <template v-if="treeview.checkbox">
      <el-tree
        ref="tree"
        :data="treeview.data"
        :props="treeview.props"
        node-key="menuId"
        :default-checked-keys="treeview.choose"
        show-checkbox
        :default-expanded-keys = "treeview.expanded"
        highlight-current
        @check-change = "nodechange" 
        icon-class="el-icon-circle-plus-outline"
        :render-content="renderContent"
        :filter-node-method="filterNode"
        >
      </el-tree>
    </template>
    <template v-else>
      <el-tree
        ref="tree"      
        :data="treeview.data"
        :props="treeview.props"
        :default-expanded-keys = "treeview.expanded"
        node-key="menuId"
        highlight-current
        @current-change = "nodechange" 
        icon-class="el-icon-circle-plus-outline"
        :render-content="renderContent"
        :filter-node-method="filterNode"
        >
      </el-tree>
    </template>
  </div>
</template>
<script>

  export default {
    data() {
      return {        
        changeStatus :false
      };
    },
    props:['treeview'],
    watch:{
      treeview:{
        handler(a, b) {
          if(this.treeview.checkbox){
            this.$refs.tree.setCheckedKeys(this.treeview.choose)
          }else{
            console.log(a);
            
          }
          
        },
        deep: true
      }
    },
    mounted(){
      console.log(this.$refs.tree)
      setTimeout(()=>{
        //this.$refs.tree.filter("公司");
      },3000)
    },
    methods:{
      filtrateList(key){
        this.$refs.tree.filter(key);
      },
       filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      renderContent(h, { node, data, store }) {
        console.log(data);
        return (
          <span class="custom-tree-node" title={data.name}>{data.name}</span>
        );
        // if(!data.status){
        //   return (
        //     <span class="custom-tree-node " style="color:orange;text-decoration: line-through">{data.name}</span>
        //   )
        // }else{
        //   return (
        //     <span class="custom-tree-node">{data.name}</span>
        //   );
        // }
        
      },
      renderUser(h, { node, data, store }){
        return (
          <span class="custom-tree-node" title={data.name}>{data.name}</span>
        );
      },
      nodechange(a,b,c){
        var that = this;
        if(!that.changeStatus){
          that.changeStatus = true;
          var arry = that.$refs.tree.getCheckedNodes(true,false);
          if(that.treeview.checkbox){
            that.$emit('choosetree',arry);
          }else{
            let _obj = {
              refs:that.$refs.tree,
              item:a
            }
            that.$emit('choosetree',a,that.$refs.tree);
          }
          setTimeout(function (){
            that.changeStatus = false;
          },100)
        }
        
      }
    }
  };
</script>
<style lang="scss">
.menu-tree{
  height: 100%;
  width: 100%;
  // overflow: hidden;
  // background-color: #545c64;
  // background:linear-gradient(left,#545c64,#ccc);
  .el-tree{
    // background-color: #545c64;
    // background:linear-gradient(left,#545c64,#ccc);
    //color: #fff;
  }
  .el-icon-circle-plus-outline{
    font-size: 1.2em;
  }
  .el-tree-node__expand-icon.expanded.el-icon-circle-plus-outline{
    transform: rotate(180deg);
  }
  .el-tree-node__expand-icon.expanded.el-icon-circle-plus-outline::before {
      content: "\e722";
  }
  .el-tree-node:focus>.el-tree-node__content ,.el-tree-node__content:hover,.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
      color:#545c64
  }    
  
}
.el-main{
  .el-icon-check:before{font-size: 1.2em;color: green;}
}
</style>

